<template>
  <div class="demo">
    <div class="demo-title">后缀图标</div>
    <div class="demo-content">
      <Space direction="vertical">
        <DatePicker @change="onChange">
          <template #suffixIcon>
            <SmileOutlined />
          </template>
        </DatePicker>
        <DatePicker placeholder="Select month" picker="month" @change="onChange">
          <template #suffixIcon>
            <SmileOutlined />
          </template>
        </DatePicker>
        <DatePicker.RangePicker @change="onRangeChange">
          <template #suffixIcon>
            <SmileOutlined />
          </template>
        </DatePicker.RangePicker>
        <DatePicker placeholder="Select week" picker="week" @change="onChange">
          <template #suffixIcon>
            <SmileOutlined />
          </template>
        </DatePicker>
        <DatePicker suffix-icon="ssc" @change="onChange" />
        <DatePicker suffix-icon="ssc" placeholder="Select month" picker="month" @change="onChange" />
        <DatePicker.RangePicker suffix-icon="ssc" @change="onRangeChange" />
        <DatePicker suffix-icon="ssc" placeholder="Select week" picker="week" @change="onChange" />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { Dayjs } from 'dayjs';
  import Space from '@sscd/space';
  import DatePicker from '@sscd/date-picker';
  const onChange = (date: Dayjs | string, dateString: string) => {
    console.log(date, dateString);
  };
  const onRangeChange = (date: [Dayjs, Dayjs] | [string, string], dateString: [string, string]) => {
    console.log(date, dateString);
  };
</script>
